<template>
	<view>
		<!-- 	<view class="top-title">
			<view class="tag">油漆标记</view>
			<view class="blue">
				保存
			</view>
		</view> -->
		<!-- <view>1123</view> -->
		<view class="big-box">
			<view class="left-box">
				<view class="left-top">
					<view class="title-north">
						北线
					</view>
					<view class="add" @click="northAdd">
						<u-icon name="plus"></u-icon>
					</view>
				</view>
				<view class="main-list vertical-line">
					<view class="left-text" v-for="(item,index) in listLeft" :key="index">
						<view>
							{{item.trainNo+"("+item.trainModel.code+")"}}
						</view>
						<view class="right" @click="openLeftA(index)">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="right-box">
				<view class="right-top">
					<view class="title-south">
						南线
					</view>
					<view class="add" @click="southAdd">
						<u-icon name="plus"></u-icon>
					</view>
				</view>
				<view class="main-list">
					<view class="left-text" v-for="(item,index) in listRight" :key="index">
						<view>
							{{item.trainNo+"("+item.trainModel.code+")"}}
						</view>
						<view class="right" @click="openRightA(index)">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 中间竖线 -->
		<view class="line-box">
			<view class="west">
				<view>西</view>
				<view>
					<u-icon name="arrow-up"></u-icon>
				</view>
			</view>
			<u-line color="#ddd" direction="col" length="310" />
			<view class="east">
				<view>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<view>东</view>
			</view>
		</view>
		<view>
			<u-action-sheet :list="showDataLeft" v-model="showLeft" @click="clickLeft"></u-action-sheet>
		</view>
		<view>
			<u-action-sheet :list="showDataRight" v-model="showRight" @click="clickRight"></u-action-sheet>
		</view>
		<!-- 加号弹出层(左列) -->
		<view class="">
			<u-popup mode="bottom" v-model="showSearchLeft" border-radius="30">
				<view class="bottom-title">
					<view @click="showSearchLeft = false;">取消</view>
					<view class="title-north">北线</view>
					<view @click="goLeft">确定</view>
				</view>
				<view class="bottom-search-box">
					<view class="small-search-box">
						<u-search placeholder="搜索" @change="searLeft" v-model="keywordLeft" :show-action="false">
						</u-search>
					</view>
					<view @click="openLeft">
						<u-icon name="plus"></u-icon><span>新造</span>
					</view>
				</view>
				<h4>注：黄色为无转向架库存</h4>
				<view class="rotate">
					<u-loading mode="flower" :show="rotatLeft"></u-loading>
				</view>
				<view class="content">
					<scroll-view scroll-y="true" style="height: 500rpx;">
						<view>
							<u-badge v-if="searLeft().length>0" type="error" class="badge" count="新" :offset="[1,500]">
							</u-badge>
							<u-badge v-if="searLeft().length>1" type="error" class="badge" count="新" :offset="[1,260]">
							</u-badge>
							<u-badge v-if="searLeft().length>2" type="error" class="badge" count="新" :offset="[1,30]">
							</u-badge>
							<ul class="num-ul-left">
								<li class="num-li-left" v-for="(item,index) in searLeft()" :key="index"
									@click="changeBlueA(item,index)"
									:class="[item.show==true?'ball-bule':'',item.hasCarBogie?'':'missing-bogie']">
									{{item.num}}
								</li>
							</ul>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
		<!-- 加号弹出层(右列) -->
		<view class="">
			<u-popup mode="bottom" v-model="showSearchRight" border-radius="30">
				<view class="bottom-title">
					<view @click="showSearchRight = false;">取消</view>
					<view class="title-south">南线</view>
					<view @click="goRight">确定</view>
				</view>
				<view class="bottom-search-box">
					<view class="small-search-box">
						<u-search placeholder="搜索" @change="searRight" v-model="keywordRight" :show-action="false">
						</u-search>
					</view>
					<view @click="openRight">
						<u-icon name="plus"></u-icon><span>新造</span>
					</view>
				</view>
				<h4>注：黄色为无转向架库存</h4>
				<view class="rotate">
					<!-- <u-loading mode="flower" :show="rotatRight"></u-loading> -->
					<u-loading mode="flower" :show="rotatLeft"></u-loading>
				</view>
				<view class="content">
					<scroll-view scroll-y="true" style="height: 500rpx;">
						<view>
							<u-badge v-if="searRight().length>0" type="error" class="badge" count="新" :offset="[1,500]">
							</u-badge>
							<u-badge v-if="searRight().length>1" type="error" class="badge" count="新" :offset="[1,260]">
							</u-badge>
							<u-badge v-if="searRight().length>2" type="error" class="badge" count="新" :offset="[1,30]">
							</u-badge>
							<ul class="num-ul-left">
								<li class="num-li-left" v-for="(item,index) in searRight()" :key="index"
									@click="changeBlueB(item,index)"
									:class="[item.show==true?'ball-bule':'',item.hasCarBogie?'':'missing-bogie']">
									{{item.num}}
								</li>
							</ul>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
		<!-- 加号弹出层（左列的加号） -->
		<view>
			<u-modal v-model="showLeftAdd" title="新造车" show-cancel-button @confirm="confirmLeft">
				<view class="modal-title">录入新造车后，可进行油漆开工操作</view>
				<view class="input-num">
					<u-input :select-open="showInfo" @click="showInfo = true" type="select" v-model="valueFirstLeft"
						:border="border" placeholder="请选择车型" />
				</view>
				<!-- <view class="input-num" ><u-input @click="aaaaaa" :disabled="true" v-model="valueFirstLeft" :type="type" :border="border" placeholder="车号" /></view> -->
				<view class="input-num">
					<u-input v-model="valueSecondLeft" :type="type" :border="border" placeholder="请输入车号" />
				</view>
			</u-modal>
		</view>
		<!-- 左边选择框 -->
		<!-- <u-input :border="border" type="select" :select-open="selectShow" v-model="model.goodsType" placeholder="请选择车型" @click="selectShow = true"></u-input> -->
		<u-select mode="single-column" :list="listDropLeft" v-model="showInfo" @confirm="selectConfirm"></u-select>

		<!-- 加号弹出层（右列的加号） -->
		<view>
			<u-modal v-model="showRightAdd" title="新造车" show-cancel-button @confirm="confirmRight">
				<view class="modal-title">录入新造车后，可进行油漆开工操作</view>
				<view class="input-num">
					<u-input :select-open="showInfoR" @click="showInfoR = true" v-model="valueFirstRight" type="select"
						:border="border" placeholder="请选择车型" />
				</view>
				<view class="input-num">
					<u-input v-model="valueSecondRight" :type="type" :border="border" placeholder="请输入车号" />
				</view>
			</u-modal>
		</view>
		<u-select mode="single-column" :list="listDropRight" v-model="showInfoR" @confirm="selectConfirmR"></u-select>
	</view>
</template>

<script>
	import {
		ProcessPaintMarkApi
	} from "./api/index.js"

	export default {
		data() {
			return {
				rotatLeft: true, //最外面北线加号列表加载状态
				rotatRight: true, //最外面北线加号列表加载状态
				showInfo: false, //左侧车下拉
				showInfoR: false, //右侧车下拉
				listDropLeft: [], //下拉菜单左边的数据
				idLeft: '', //左下拉菜单车型的id
				idRight: '', //右下拉菜单车型的id
				listDropRight: [], //下拉菜单右边的数据
				//左边盒子的数据
				listLeft: [],
				//右边盒子的数据
				listRight: [],
				showLeft: false, //控制弹出层（箭头左列）
				showDataLeft: [{
					text: "置顶",
					color: "#3478F7"
				}, {
					text: "上移",
					color: "#3478F7"
				}, {
					text: "下移",
					color: "#3478F7"
				}, {
					text: "置底",
					color: "#3478F7"
				}, {
					text: "删除",
					color: "#ff0000"
				}], //弹出层内容（箭头左列）
				showRight: false, //控制弹出层（箭头右列）
				showDataRight: [{
					text: "置顶",
					color: "#3478F7"
				}, {
					text: "上移",
					color: "#3478F7"
				}, {
					text: "下移",
					color: "#3478F7"
				}, {
					text: "置底",
					color: "#3478F7"
				}, {
					text: "删除",
					color: "#ff0000"
				}], //弹出层内容（箭头右列）
				showSearchLeft: false, //左边加号弹出层
				showSearchRight: false, //右边加号弹出层
				keywordLeft: '', //输入框的值（左）
				keywordRight: '', //输入框的值（右）
				serchDataLeft: [
					// 	{num:'482612312312521(C64T)',show:false},
					
				], //加号模态框的值（左边）
				serchDataRight: [
					
					// {num:'4826529(C64T)',show:false},
				], //加号模态框的值（右边）
				leftIndex: false, //左边加号的控制颜色
				showLeftAdd: false, //打开左边模态框
				showRightAdd: false, //打开右侧模态框
				valueFirstLeft: '', //左边模态框的值
				valueSecondLeft: '', //左边模态框的值
				valueFirstRight: '', //右边模态框的值
				valueSecondRight: '', //右边模态框的值
				type: 'text', //类型
				border: true, //边框
				blueLeftData: [], //往左侧列表添加
				blueRightData: [], //往右侧列表添加
				valLeft: '', //新造左
				valRight: "", //新造右
				indexShowLeftA: '', //控制新的显示与隐藏
				leftDataAccurate: '', //点击左侧列表的第几个
				rightDataAccurate: '', //点击右侧列表的第几个

				workShopCode: 'YQGQ', //南线北线的id
				lines: [], //存放数据
				flagBlue:false,//控制蓝色数据的添加

			}
		},

		created() {
			//加载所有车型
			this.allCar()
			
			
			this.lineId()
			// console.log(ProcessPaintMarkApi);
			//外部展示列表
			ProcessPaintMarkApi.dividedTrainPlanList().then(res => {
				// console.log(res);
				this.listLeft = res.data['油漆落车产线（北）'];
				this.listRight = res.data['油漆落车产线（南）'];
			})
			//加号展示列表
			ProcessPaintMarkApi.dividedTrainPlanUndividedList().then(res => {
				console.log(res);


			})
		},
		methods: {
			//加载所有车型列表 模态框中
			allCar(){
				ProcessPaintMarkApi.dividedTrainPlanUndividedList().then(res => {
					this.rotatLeft = false
					console.log(res);
					res.data.forEach((item, index) => {
						// console.log(item);
						let add = item.trainNo + "(" + item.trainModel.code + ")"
						this.serchDataLeft.push({
							num: add,
							show: false,
							hasCarBogie: item.hasCarBogie,
							id: item.id
						})
					})
				})
			},
			//找南线北线的id方便添加列表数据
			lineId() {
				ProcessPaintMarkApi.lineFetch({
					workShopCode: this.workShopCode
				}).then(res => {
					console.log(res);
					this.lines = res.data
				})
			},
			//最外面的北线右边的加号
			northAdd() {
				this.showSearchLeft = true;

			},
			//最外面的南线右边的加号
			southAdd() {
				this.showSearchRight = true;
			},
			//左侧添加车列表数据
			getDropLeft() {
				ProcessPaintMarkApi.getList().then(res => {
					console.log(res);
					res.data.forEach((item, index) => {
						this.listDropLeft.push({
							label: item.code,
							value: item.id
						})

					})
					console.log(this.listDropLeft);
					// this.listDropLeft=res.data
				})

			},
			//右侧添加车列表数据
			getDropRight() {
				ProcessPaintMarkApi.getList().then(res => {
					console.log(res);
					res.data.forEach((item, index) => {
						// console.log(item.code);
						this.listDropRight.push({
							label: item.code,
							value: item.id
						})

					})
					console.log(this.listDropRight);
					// this.listDropLeft=res.data
				})

			},
			//左边添加新造车下拉菜单
			selectConfirm(e) {
				console.log(e);
				e.map((val, index) => {
					this.valueFirstLeft = val.label
					this.idLeft = val.value
					console.log(this.valueFirstLeft);
					console.log(this.idLeft);
				})
			},

			//右边边添加新造车下拉菜单
			selectConfirmR(e) {
				console.log(e);
				e.map((val, index) => {
					this.valueFirstRight = val.label
					this.idRight = val.value
					console.log(this.valueFirstRight);

				})
			},


			openLeftA(index) {
				// console.log(index);
				this.showLeft = true
				this.leftDataAccurate = index
			},
			openRightA(index) {
				this.showRight = true
				this.rightDataAccurate = index
			},
			clickLeft(index) {
				console.log(index);
				if (index == 0) {
					console.log("点击了置顶");
					// console.log(this.listLeft);
					// this.listLeft.splice(this.leftDataAccurate,0,0)
					this.listLeft.map((item, index) => {
						if (index == this.leftDataAccurate) {
							this.listLeft.unshift(this.listLeft.splice(this.leftDataAccurate, 1)[0])
						}
					})
				} else if (index == 1) {
					console.log("点击了上移");
					if (this.leftDataAccurate == 0) {
						uni.showToast({
							title: "不能上移了",
							icon: "error"
						})
					} else {
						[this.listLeft[this.leftDataAccurate - 1], this.listLeft[this.leftDataAccurate]] = [this.listLeft[
							this.leftDataAccurate], this.listLeft[this.leftDataAccurate - 1]]
					}
				} else if (index == 2) {
					console.log("点击了下移");
					if (this.leftDataAccurate == this.listLeft.length - 1) {
						uni.showToast({
							title: "不能下移了",
							icon: "error"
						})
					} else {
						[this.listLeft[this.leftDataAccurate + 1], this.listLeft[this.leftDataAccurate]] = [this.listLeft[
							this.leftDataAccurate], this.listLeft[this.leftDataAccurate + 1]]
					}

				} else if (index == 3) {
					console.log("点击了置底");
					this.listLeft.map((item, index) => {
						if (index == this.leftDataAccurate) {
							this.listLeft.push(this.listLeft.splice(this.leftDataAccurate, 1)[0])
						}
					})
				} else if (index == 4) {
					console.log("点击了删除");
					this.listLeft.splice(this.leftDataAccurate, 1)
				}
			},
			clickRight(index) {
				console.log(index);
				if (index == 0) {
					console.log("点击了置顶");
					// console.log(this.listLeft);
					// this.listLeft.splice(this.leftDataAccurate,0,0)
					this.listRight.map((item, index) => {
						if (index == this.rightDataAccurate) {
							this.listRight.unshift(this.listRight.splice(this.rightDataAccurate, 1)[0])
						}
					})
				} else if (index == 1) {
					console.log("点击了上移");
					if (this.rightDataAccurate == 0) {
						uni.showToast({
							title: "不能上移了",
							icon: "error"
						})
					} else {
						[this.listRight[this.rightDataAccurate - 1], this.listRight[this.rightDataAccurate]] = [this
							.listRight[this.rightDataAccurate], this.listRight[this.rightDataAccurate - 1]
						]
					}
				} else if (index == 2) {
					console.log("点击了下移");
					if (this.rightDataAccurate == this.listRight.length - 1) {
						uni.showToast({
							title: "不能下移了",
							icon: "error"
						})
					} else {
						[this.listRight[this.rightDataAccurate + 1], this.listRight[this.rightDataAccurate]] = [this
							.listRight[this.rightDataAccurate], this.listRight[this.rightDataAccurate + 1]
						]
					}

				} else if (index == 3) {
					console.log("点击了置底");
					this.listRight.map((item, index) => {
						if (index == this.rightDataAccurate) {
							this.listRight.push(this.listRight.splice(this.rightDataAccurate, 1)[0])
						}
					})
				} else if (index == 4) {
					console.log("点击了删除");
					this.listRight.splice(this.rightDataAccurate, 1)
				}
			},
			onNavigationBarButtonTap(e) {
				if (e.index == 0) {
					console.log(112222);
					
					if (this.blueLeftData.length === 0 && this.blueRightData.length === 0) {
					           uni.showToast({
					           	title:"暂无开工车辆",
								icon:"error"
					           })   
					          return;
					     }
					const data = [];
					const northLine = this.lines.find(t => t.name === '油漆落车产线（北）');
					let northOrder = northLine.maxOrder || 0;
					const southLine = this.lines.find(t => t.name === '油漆落车产线（南）');
					let southOrder = southLine.maxOrder || 0;
					this.blueLeftData.forEach(item => {
						if (data.find(t => t.line.id === northLine.id)) {
							data.find(t => t.line.id === northLine.id).plans.push({
								id: item.id,
								paintLineOrder: ++northOrder
							});
						} else {
							data.push({
					   line: {
									id: northLine.id,
								},
								plans: [{
									id: item.id,
									paintLineOrder: ++northOrder
								}]
							});
						}
					});
					this.blueRightData.forEach(item => {
						if (data.find(t => t.line.id === southLine.id)) {
							data.find(t => t.line.id === southLine.id).plans.push({
								id: item.id,
								paintLineOrder: ++southOrder
							});
						} else {
							data.push({
								line: {
									id: southLine.id,
								},
								plans: [{
									id: item.id,
									paintLineOrder: ++southOrder
								}]
							});
						}
					});
					 ProcessPaintMarkApi.paintStartSave({presets: data}).then(res=>{
						 console.log(res.msg);
						 uni.showToast({
						 	title:"操作成功"
						 })
						 if(res.msg=="请求成功") {
							
							 // this.listLeft.push(...this.blueLeftData)
							 this.blueLeftData = [];
							 // this.listRight.push(...this.blueRightData)
							 this.blueRightData=[];
							setTimeout(()=>{
								uni.reLaunch({
									url:"/pages/paint/paint"
								})
							},600)
							
						 }
						  
					 })
				}
			},
			//打开左侧加号
			openLeft() {
				this.showLeftAdd = true;
				this.getDropLeft()
			},
			//打开右侧加号
			openRight() {
				this.showRightAdd = true
				this.getDropRight()
			},
			//搜索左侧
			searLeft() {
				return this.serchDataLeft.filter(item => item.num.includes(this.keywordLeft))
			},
			//搜索右侧
			searRight() {
				// return  this.serchDataRight.filter(item => item.num.includes(this.keywordRight))
				return this.serchDataLeft.filter(item => item.num.includes(this.keywordRight))
			},
			confirmLeft() {
				console.log("点击左侧确定");
				console.log(this.valueSecondLeft);
				console.log(this.valueFirstLeft);

				let form = {
					trainNo: this.valueSecondLeft,
					train_model: {
						id: this.idLeft
					}
				}
				ProcessPaintMarkApi.newBuildSave(form).then(res => {
					console.log(res);
					uni.showToast({
						title: "操作成功",
						icon: "success",
					})
					this.showSearchLeft = false;
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/paint/paint"
						})
					},500)
					// this.valLeft = this.valueSecondLeft + "(" + this.valueFirstLeft + ")"
					// console.log(this.valLeft);
					// this.serchDataLeft.unshift({
					// 	num: this.valLeft,
					// 	show: false
					// })
				

				})
				this.valueFirstLeft=''
				this.valueSecondLeft=''
			},
			confirmRight() {
				console.log(this.valueSecondRight);
				console.log(this.valueFirstRight);
				
				let form = {
					trainNo: this.valueSecondRight,
					train_model: {
						id: this.idRight
					}
				}
				ProcessPaintMarkApi.newBuildSave(form).then(res => {
					console.log(res);
					uni.showToast({
						title: "操作成功",
						icon: "success",
					})
					this.showSearchRight = false;
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/paint/paint"
						})
					},500)
					// this.valLeft = this.valueSecondLeft + "(" + this.valueFirstLeft + ")"
					// console.log(this.valLeft);
					// this.serchDataLeft.unshift({
					// 	num: this.valLeft,
					// 	show: false
					// })
				})
				this.valueFirstRight = ''
				this.valueSecondRightt = ''
			},
			changeBlueA(item, index) {
				item.show = !item.show
				console.log(item);
				console.log(index);
				if (item.show == true) {
					this.blueLeftData.push({
						trainNo: item.num.split("(")[0],
						id: item.id,
						trainModel: {
							code: item.num.split("(")[1].split(")")[0]
						},

					})
				}
				if (item.show == false) {
					let index = this.blueLeftData.findIndex((value, index) => {
						return value.num == item.num;
					})
					this.blueLeftData.splice(index, 1)
					// console.log(index);
					// console.log(this.blueLeftData);
				}
				// console.log(this.blueLeftData);
			},
			changeBlueB(item, index) {
				item.show = !item.show
				// console.log(111);
				console.log(item);
				// console.log(index);
				if (item.show == true) {
					this.blueRightData.push({
						trainNo: item.num.split("(")[0],
						id: item.id,
						trainModel: {
							code: item.num.split("(")[1].split(")")[0]
						}
					})
				}
				if (item.show == false) {
					let index = this.blueRightData.findIndex((value, index) => {
						return value.num == item.num;
					})
					this.blueRightData.splice(index, 1)
					// console.log(index);
					// console.log(this.blueRightData);
				}
			},
			goRight() {
				this.showSearchRight = false;
				let newArr = []
				this.serchDataLeft.forEach((item, index) => {
					if (item.show == false) {
						newArr.push(item);
					}
				})
				this.serchDataLeft = newArr;
				console.log(this.blueRightData);
			},
			goLeft() {
				this.showSearchLeft = false;

				let newArr = []
				this.serchDataLeft.forEach((item, index) => {
					if (item.show == false) {
						newArr.push(item);
					}
				})
				this.serchDataLeft = newArr;
				// if(this.flagBlue) {
				// 	this.listLeft.push(...this.blueLeftData);
				// }
				// this.blueLeftData = [];
				// console.log(this.blueLeftData);
				// console.log(1111);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.title-north,
	.title-south {
		font-weight: 700;
	}

	.big-box {
		// width: 100%;
		// height: 600px;
		// border: 1px solid red;
		// border-right:1px solid red ;
		overflow: hidden;
	}

	.left-box,
	.right-box {
		float: left;
	}

	.left-box {
		width: 374rpx;
		// height: 600px;
		// background-color: #007AFF;
	}

	.right-box {
		width: 374rpx;
		// height: 600px;
		// background-color: #0086B3;
	}

	.left-top,
	.left-text,
	.right-top {
		// width: 100%;
		height: 100rpx;
		// border: 1px solid #ddd;	
		// text-align: center;
		// line-height: 50px;
		font-size: 32rpx;
		color: #666666;
		// font-weight: 700;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-left: 60rpx;
	}

	.left-top {
		border-bottom: 1px solid #ddd;
		border-right: 1px solid #ddd;
	}

	.right-top {
		border-bottom: 1px solid #ddd;
	}

	.left-text {
		border-top: 0;
	}

	.main-list {
		height: calc(100vh - 288rpx);
		overflow: scroll;

	}

	.vertical-line {
		border-right: 1px solid #ddd;
	}

	.add {
		font-size: 32rpx;
		color: #3478F7;

	}

	.west,
	.east {
		color: #AAAAAA;
		font-size: 28rpx;
		margin-left: 172rpx;
	}

	.line-box {
		width: 1px;
		position: absolute;
		top: 140px;
		left: 25%;
		/* #ifdef APP-PLUS */
		left: 29%;
		/* #endif */
	}

	.u-line {
		border-left: 0 !important;
		width: 1px;
	}

	.bottom-text {
		// width: 100%;
		height: 80rpx;
		// margin: 0 auto;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		color: rgb(64, 158, 255);
		border-bottom: 1px solid #ddd;
	}

	.bottom-box>view:nth-of-type(5) {
		color: rgb(249, 94, 90);
	}

	.content {
		// padding: 24rpx;
		// text-align: center;
	}

	.bottom-title {
		// width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		color: rgb(64, 158, 255);
		line-height: 100rpx;
		font-size: 36rpx;
	}

	.bottom-title>view:nth-of-type(2) {
		font-size: 32rpx;
		color: #666666;
	}

	.bottom-search-box {
		// width: 100%;
		// width: 600rpx;
		padding: 0rpx 64rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #409EFF;
		border-bottom: 1px solid black;
	}

	.small-search-box {
		width: 500rpx;
	}

	h4 {
		margin-left: 10rpx;
		margin-top: 10rpx;
	}

	.num-ul-left {
		overflow: hidden;
	}

	.num-li-left {
		float: left;
		// padding-left: 10rpx;
		width: 230rpx;
		// height: 68rpx;
		word-wrap: break-word;
		border: 1px solid;
		border-color: rgb(233, 233, 233);
		border-radius: 106rpx;
		line-height: 68rpx;
		text-align: center;
		// overflow: scroll;
		margin: 6rpx;
		/* #ifdef APP-PLUS */
		margin-left: 22px;
		/* #endif */

	}

	.ball-bule {
		border-color: rgb(64, 158, 255);
		background-color: rgb(64, 158, 255) !important;
		color: #fff;
	}

	.modal-title {
		// width: 100%;
		height: 40rpx;
		// margin: auto;
		text-align: center;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.input-num {
		width: 510rpx;
		height: 80rpx;
		margin: 10rpx auto;
		/* #ifdef APP-PLUS */
		margin: 10px auto;
		/* #endif */
	}

	/deep/ .u-actionsheet-cancel {
		color: #3478F7;
	}


	.rotate {
		width: 100%;
		text-align: center;
	}

	.missing-bogie {
		background-color: #FFFF66;
	}

	h4 {
		color: #d9001b
	}
</style>
